<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery.min.js"></script>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>
<!--
祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()
-->


<div class="ancestors">

    <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>
    </div>

    <div style="width:500px;">div (祖父元素)
        <p>p (父元素)
            <span>span</span>
        </p>
    </div>
</div>


<script>

    $(function () {
        // $('span').parent().css({"color": "red", "border": "2px solid red"})
        // $('span').parents().css({"color": "red", "border": "2px solid red"})
        $('span').parentsUntil('div').css({"color": "red", "border": "2px solid red"})
    })

</script>

</body>
</html>